<!DOCTYPE html>
<html>
<head>
<title>Basic usage</title>
<link rel="stylesheet" href="../css/examples-offline.css">
<link rel="stylesheet" href="../css/kendo.common.min.css">
<link rel="stylesheet" href="../css/kendo.default.min.css">
<script src="../script/jquery-1.8.2.min.js"></script>
<script src="../script/kendo.splitter.min.js"></script>
<style type="text/css">
#vertical {
	height: 380px;
	width: 700px;
	margin: 0 auto;
}

#middle-pane {
	background-color: rgba(60, 70, 80, 0.10);
}

#bottom-pane {
	background-color: rgba(60, 70, 80, 0.15);
}

#left-pane {
	background-color: rgba(60, 70, 80, 0.05);
}

#center-pane {
	background-color: rgba(60, 70, 80, 0.05);
}

#right-pane {
	background-color: rgba(60, 70, 80, 0.05);
}

.pane-content {
	padding: 0 10px;
}
</style>

</head>
<body style="">
	<div id="example" class="k-content">
		<div id="vertical" class="k-widget k-splitter" data-role="splitter">
			<div id="top-pane" class="k-pane k-scrollable"
				style="position: absolute; top: 0px; height: 170px; width: 700px;">
				<div id="horizontal" class="k-widget k-splitter"
					style="height: 100%; width: 100%;" data-role="splitter">
					<div id="left-pane" class="k-pane k-scrollable"
						style="position: absolute; top: 0px; width: 220px; height: 170px; left: 0px;">
						<div class="pane-content">
							<h3>Inner splitter / left pane</h3>
							<p>Resizable and collapsible.</p>
						</div>
					</div>
					<div
						class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-draggable-horizontal k-splitbar-horizontal-hover"
						style="height: 170px; left: 220px;">
						<div class="k-icon k-collapse-prev"></div>
						<div class="k-icon k-resize-handle"></div>
					</div>
					<div id="center-pane" class="k-pane k-scrollable"
						style="position: absolute; top: 0px; width: 246px; height: 170px; left: 227px;">
						<div class="pane-content">
							<h3>Inner splitter / center pane</h3>
							<p>Resizable only.</p>
						</div>
					</div>
					<div
						class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-draggable-horizontal"
						style="height: 170px; left: 473px;">
						<div class="k-icon k-resize-handle"></div>
						<div class="k-icon k-collapse-next"></div>
					</div>
					<div id="right-pane" class="k-pane k-scrollable"
						style="position: absolute; top: 0px; width: 220px; height: 170px; left: 480px;">
						<div class="pane-content">
							<h3>Inner splitter / right pane</h3>
							<p>Resizable and collapsible.</p>
						</div>
					</div>
				</div>
			</div>
			<div
				class="k-splitbar k-state-default k-splitbar-vertical k-splitbar-draggable-vertical"
				style="width: 700px; top: 170px;">
				<div class="k-icon k-resize-handle"></div>
			</div>
			<div id="middle-pane" class="k-pane k-scrollable"
				style="position: absolute; top: 177px; height: 100px; width: 700px;">
				<div class="pane-content">
					<h3>Outer splitter / middle pane</h3>
					<p>Resizable only.</p>
				</div>
			</div>
			<div
				class="k-splitbar k-state-default k-splitbar-vertical k-splitbar-static-vertical"
				style="width: 700px; top: 277px;"></div>
			<div id="bottom-pane" class="k-pane k-scrollable"
				style="position: absolute; top: 280px; height: 100px; width: 700px;">
				<div class="pane-content"></div>
			</div>
		</div>
	</div>
	<script>
	$(document).ready(function() {
		$("#vertical").kendoSplitter({
			orientation : "vertical",
			panes : [ {
				collapsible : false
			}, {
				collapsible : false,
				size : "100px"
			}, {
				collapsible : false,
				resizable : false,
				size : "100px"
			} ]
		});
		$("#horizontal").kendoSplitter({
			panes : [ {
				collapsible : true,
				size : "220px"
			}, {
				collapsible : false
			}, {
				collapsible : true,
				size : "220px"
			} ]
		});
	});
</script>
</body>
</html>
